<template>
  <div>
    <person-header></person-header>
    <div class="main_content">
      <div class="stu_school_item cur">
        <div class="main_list">
          <div class="main">
            <p class="gray_title40">基本资料</p>
            <div class="info_wrap">
              <p class="title_line">
                <span>报名信息</span>
              </p>
              <ul class="info_ul">
                <li>
                  <label>报名学校：</label>
                  {{ schoolItem.schoolName }}
                </li>
                <li>
                  <label>报名类型：</label>
                  <select
                    id="planId"
                    name="planId"
                    class="long"
                    v-model="applyTypeId"
                    @change="changeApplyType(applyTypeId)"
                  >
                    <option value="-1">请选择报名类型</option>
                    <option
                      :value="item.applyTypeId"
                      v-for="(item, index) in applyTypeList"
                      :key="index"
                    >
                      {{ item.applyTypeName }}
                    </option>
                  </select>
                  <p class="ps colOrange"></p>
                </li>
              </ul>
            </div>

            <!-- 学生基本信息 -->
            <student-basic-info></student-basic-info>
            <el-button type="primary" style="position: relative; left: 50px"
              >保存</el-button
            >
            <!-- 填报信息 -->
            <fill-info></fill-info>
          </div>
          <!-- 附件信息 -->
          <attachment></attachment>
        </div>
        <p class="continue_add">
          <span class="ml30"
            ><a href="/"><i class="add_stu_icon"></i>我要报名其他学生</a></span
          >
        </p>
      </div>
    </div>
    <div class="footer">
      主办单位：湖南省长沙市教育局&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a
        href="https://beian.miit.gov.cn/"
        target="_blank"
        style="color: #929292"
        >备案号: 湘ICP备05005530号-1 </a
      >本网站由长沙市教育局信息中心承办
    </div>
  </div>
</template>

<script>
import school from "@/api/school.js";
import applyType from "@/api/apply-type.js";
import StudentBasicInfo from "./StudentBasicInfo.vue";
import FillInfo from "./FillInfo.vue";
import Attachment from "./Attachment.vue";

export default {
  name: "PrimaryRegistrationInfo",
  components: { StudentBasicInfo, FillInfo, Attachment },
  data() {
    return {
      countiesId: null,
      schoolId: null,
      schoolGrade: null,
      schoolForm: {},
      schoolItem: {},
      applyTypeList: {},
      applyTypeForm: {},
      applyTypeId: -1,
      dialogImageUrl: "",
      dialogVisible: false,
    };
  },

  mounted() {
    this.countiesId = this.$route.params.countiesId;
    this.schoolId = this.$route.params.schoolId;
    this.schoolGrade = this.$route.params.schoolGrade;
    this.selectsSchoolInfo();
    this.selectApplyTypeList();
  },

  methods: {
    /**
     * 通过学校的id查询学校的信息
     */
    selectsSchoolInfo() {
      if (this.schoolId) {
        school
          .selectByPrimary(this.schoolId)
          .then((res) => {
            let data = res.data;
            console.log("报名学校信息:", data);
            if (data.ok) {
              this.schoolItem = data.data;
            } else this.$message.error("通过学校ID查询失败");
          })
          .catch((err) => {
            console.log(err);
          });
      }
    },
    /**
     * 查询所有的报名类别
     */
    selectApplyTypeList() {
      this.applyTypeForm.applyTypeGrade = this.schoolGrade;
      applyType
        .selects(this.applyTypeForm)
        .then((res) => {
          let data = res.data;
          if (data.ok) {
            this.applyTypeList = data.data;
          } else this.$message.error("查询申请类型失败");
        })
        .catch((err) => {
          console.log(err);
        });
    },
    /**
     * 改变报名类型触发的函数
     */
    changeApplyType(applyTypeId) {
      console.log("changeApplyType:", applyTypeId);
    },
    handleAvatarSuccess(res, file) {
      this.imageUrl = URL.createObjectURL(file.raw);
    },
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleRemove(file, fileList) {
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
  },
};
</script>

<style scoped>
.main_content {
  width: 1000px !important;
  margin-top: 80px !important;
  margin-bottom: 60px;
}

.file-upload {
  display: inline-block;
  width: 50px;
}

.file-upload /deep/ .el-upload--picture-card,
.file-upload /deep/ .el-upload-list--picture-card .el-upload-list__item {
  line-height: 100px;
  font-size: 12px;
  height: 100px;
  width: 100px;
  position: relative;
  background: #f8f8f8;
  border: 1px solid #d2d2d2;
  border-radius: 0;
}

.asterisk::after {
  content: "*";
  color: red;
  padding-left: 10px;
  font-size: 15px;
}

em {
  width: 30px;
  padding-left: 5px;
  padding-right: 10px;
}
.min {
  width: 90px;
  height: 30px;
  margin-right: 13px;
}
.middle {
  width: 200px;
  height: 30px;
}

.my-center {
  height: 100px;
  line-height: 100px;
}
</style>